import 'package:flutter/material.dart';

class ShopDemo extends StatelessWidget {
  const ShopDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('案例-商品订单信息'),
          backgroundColor: const Color.fromARGB(255, 246, 166, 109),
        ),
        body: Container(
          margin: const EdgeInsets.only(top: 20),
          width: MediaQuery.of(context).size.width,
          height: 220,
          color: const Color.fromARGB(255, 190, 232, 250),
          child: Column(
            children: [
              //顶部下单时间
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Text('2024-08-15 21:49:48'),
                  Text(
                    '待发货',
                    style: TextStyle(color: Color.fromARGB(255, 255, 228, 148)),
                  )
                ],
              ),
              const SizedBox(
                height: 10,
              ),
              //商品详情部分
              Row(
                children: [
                  //图片
                  Image.network(
                    'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
                    width: 100,
                  ),
                  const SizedBox(width: 10),
                  //右侧商品文案
                  Expanded(
                    //弹性布局
                    child: Column(
                      //文案列表
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(children: const [
                          Expanded(
                            child: Text(
                              '茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯',
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          //数量
                          Padding(
                            padding: EdgeInsets.only(left: 10, right: 10),
                            child: Text('x2'),
                          )
                        ]),
                        const SizedBox(height: 10),
                        const Text(
                          '规格:白色240ml',
                          style: TextStyle(
                              color: Color.fromARGB(255, 152, 152, 151)),
                        ),
                        const SizedBox(height: 10),
                        const Text('￥119.5'),
                      ],
                    ),
                  )
                ],
              ),
              //底部合计与按钮
              Container(
                width: MediaQuery.of(context).size.width,
                padding: const EdgeInsets.only(left: 10, right: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    //底部合计与按钮
                    const Text('合计:￥238.0'),
                    const SizedBox(height: 10),
                    Container(
                      padding: const EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2)),
                      child: const Text('再次购买'),
                    ),
                    // ElevatedButton(onPressed: () {}, child: Text('再次购买'))
                  ],
                ),
              )
            ],
          ),
        ));
  }
}
